<template>
  <div class="detail-wrapper">
    <el-card class="mt-4 !border-none" shadow="never">
      <template #header>
        <div class="card-header">
          <span>基本信息</span>
        </div>
      </template>
      <div class="itemContent">
        <el-space>
          <div class="w-120 label-title">商品分类</div>
          <div>
            <span>{{ pDetail.cateName || '_' }}</span>
          </div>
        </el-space>
        <el-space>
          <div class="w-120 label-title">商品品牌</div>
          <div>
            <span>{{ pDetail.brandName || '_' }}</span>
          </div>
        </el-space>
        <el-space>
          <div class="w-120 label-title">商品名称</div>
          <div>
            <span>{{ pDetail.goodsName || '_' }}</span>
          </div>
        </el-space>
        <el-space>
          <div class="w-120 label-title">商品类型</div>
          <div>
            <span>现金商品</span>
          </div>
        </el-space>
        <el-space>
          <div class="w-120 label-title">商品主图</div>
          <div>
            <el-space wrap v-if="detailImags">
              <div v-for="(fit, index) in detailImags" :key="index" class="block">
                <el-image
                    style="width: 100px; height: 100px"
                    :src="fit"
                    :fit="fit"
                />
              </div>
            </el-space>
          </div>
        </el-space>
      </div>
    </el-card>
    <el-card :style="{ marginTop: '10px' }" class="mt-4 !border-none" shadow="never">
      <template #header>
        <div class="card-header">
          <span>规格信息</span>
        </div>
      </template>
      <el-table size="large" :data="pDetail.goodsSpecs">
        <el-table-column label="规格值" prop="specName" min-width="80" />
        <el-table-column label="库存" prop="stock" min-width="100"></el-table-column>
        <el-table-column
            label="供货商结算价"
            prop="supplierPrice"
            min-width="100"
        ></el-table-column>
<!--        <el-table-column-->
<!--            label="平台结算价"-->
<!--            prop="supplyChainPrice"-->
<!--            min-width="100"-->
<!--        ></el-table-column>-->
<!--        <el-table-column label="利润" min-width="100" prop="profits"></el-table-column>-->
<!--        <el-table-column-->
<!--            label="划线价"-->
<!--            prop="marketPrice"-->
<!--            min-width="100"-->
<!--        ></el-table-column>-->
        <el-table-column label="打包数" prop="packageNum" min-width="80"></el-table-column>
        <el-table-column label="快递起订量" prop="moq" min-width="80"></el-table-column>
        <el-table-column label="物流起订量" prop="wlMoq" min-width="80"></el-table-column>
        <el-table-column label="重量(g)" prop="weight" min-width="80"> </el-table-column>
        <el-table-column label="规格图片" min-width="100">
          <template #default="{ row }">
            <el-image
                style="width: 40px; height: 40px"
                :src="row.image"
                :fit="row.image"
            />
          </template>
        </el-table-column>
<!--        <el-table-column label="操作" width="120" fixed="right">-->
<!--          <template #default="{ row }">-->
<!--            <e-space>-->
<!--              <el-button-->
<!--                  type="primary"-->
<!--                  link-->
<!--                  @click="-->
<!--                                    handleEdit({-->
<!--                                        ...row,-->
<!--                                        type: 1,-->
<!--                                        lowLimit: row.supplierPrice,-->
<!--                                        price: row.supplyChainPrice,-->
<!--                                        title: '修改平台结算价'-->
<!--                                    })-->
<!--                                "-->
<!--              >-->
<!--                修改平台结算价-->
<!--              </el-button>-->
<!--              <el-button-->
<!--                  type="primary"-->
<!--                  link-->
<!--                  @click="-->
<!--                                    handleEdit({-->
<!--                                        ...row,-->
<!--                                        type: 2,-->
<!--                                        price: row.marketPrice,-->
<!--                                        title: '修改划线价'-->
<!--                                    })-->
<!--                                "-->
<!--              >-->
<!--                修改划线价-->
<!--              </el-button>-->
<!--            </e-space>-->
<!--          </template>-->
<!--        </el-table-column>-->
      </el-table>
    </el-card>
    <el-card :style="{ marginTop: '10px' }" class="mt-4 !border-none" shadow="never">
      <template #header>
        <div class="card-header">
          <span>商品描述</span>
        </div>
      </template>
      <div class="itemContent">
        <div v-html="pDetail.description || '_'"></div>
      </div>
    </el-card>
    <!-- <el-card :style="{ marginTop: '10px' }" class="mt-4 !border-none" shadow="never">
        <template #header>
            <div class="card-header">
                <span>运费信息</span>
            </div>
        </template>
        <div class="itemContent">
            <el-space>
                <div class="w-120 label-title">运费模版</div>
                <div>
                    <span>xxxxxxxxx</span>
                </div>
            </el-space>
            <el-space>
                <div class="w-120 label-title">详情描述</div>
                <div>
                    <el-space wrap>
                        <div v-for="(fit, index) in imgs" :key="index" class="block">
                            <el-image
                                style="width: 100px; height: 100px"
                                :src="fit"
                                :fit="fit"
                            />
                        </div>
                    </el-space>
                </div>
            </el-space>
        </div>
    </el-card> -->
    <edit-popup v-if="showEdit" ref="editRef" @success="getDetail" @close="showEdit = false" />
  </div>
</template>
<script lang="ts" setup name="productDetail">
import { getSupplierGoodsDetail } from '@/servers/goods/api/supplyChainshangpingonghuoshangshangpinguanli'
import { ref } from 'vue'
import editPopup from '../../priceEditor/index.vue'
const editRef = ref()
const route = useRoute()
const showEdit = ref(false)

const pDetail = ref({} as API.SupplyChainGoodsInfoVo)

const detailImags = computed(() => {
  if (pDetail.value.images) {
    if (typeof pDetail.value.images == 'string') return pDetail.value.images.split(',')
    return pDetail.value.images
  }
  return []
})

async function getDetail() {
  const res = await getSupplierGoodsDetail({
    id: route.query.id as any
  })
  pDetail.value = res
}

const handleEdit = async (data: any) => {
  showEdit.value = true
  await nextTick()
  editRef.value?.open(data.type, {
    id: data.id,
    price: data.price,
    title: data.title,
    lowLimit: data.lowLimit || 0
  })
}

getDetail()
</script>

<style lang="scss" scoped>
.itemContent {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  ::v-deep .el-space {
    margin-bottom: 10px;
  }
}
</style>
